<template>
<section id="loading" class="page">
    <div class="vhBox">
        <div id="l-bar">
            <i :style="{width: `${progress}%`}"></i>
        </div>
        <span id="l-num" v-html="`${progress}%`">{{progress+'%'}}</span>
    </div>
</section>
</template>

<script>
const imgArr = [
    'any/logo.png',
    'music.png',
]
export default {
	name: 'Loading',
    props: {
        timer: String,
    },
	data() {
		return {
			index: 0,
            carIndex: 0,
            carimgArr: [],
            carTimer: null,
		}
	},
	components: {

	},
	computed: {
		cdn() {
			return process.env.VUE_APP_BASE_URL;
		},
		progress() {
			return parseInt(this.index / imgArr.length * 100);
		},
	},
	watch: {
		index(t) {
			if (t == imgArr.length) {
				this.loadOver();
			} else {
                this.loadImg();
			}
		},
	},
	methods: {

		loadImg() {
			let img = new Image();
			img.src = this.cdn + 'img/' + imgArr[this.index];
			img.onload = () => this.index++;
		},
		loadOver() {
            // return;
			setTimeout(()=>{
				this.$emit('complete');
			},1e3)
		},
        initImg(){
            imgArr.forEach((item)=>{
                let img = require(`../assets/${item}`);
                // console.log('img',img);
            })
            // console.log(imgArr);
            console.log('require over');
            this.loadImg();
        },
	},
	mounted() {
        this.initImg();
	}
}
</script>

<style lang="scss" scoped>
#loading {
    background: #fff;

    #l-bar {
        position: absolute;
        left: 157px;
        top: 50%;
        margin-top: -10px;
        padding: 6px 10px 7px;
        width: 325px;
        height: 21px;

        > i {
            display: block;
            width: 0%;
            height: 100%;
            background-color: #000;
            border-radius: 4px;
        }
    }
    #l-num {
        position: absolute;
        left: 0;
        top: 50%;
        margin-top: 27px;
        width: 100%;
        font-size: 24px;
        color: #000;
        text-align: center;
    }
}
</style>
